<template>
  <basic-container>
    <el-dialog  :visible.sync="show" :close-on-click-modal='false' append-to-body="true"  @close="show = false">
      <div class="main">
        <div style="font-weight: bold" v-if="lng">
          <span>经纬度：{{lng}},{{lat}}</span>
          <span style="margin-left: 50px" v-if="addr">地址：{{addr}}</span>
        </div>
        <div class="map-box">
          <div id="mapContainer" style="height: 560px; margin-top: 10px" />
          <div class="search-boc">
            <el-input id="tipinput" v-model="keyword" size="small" placeholder="输入关键字搜索" clearable/>
            <el-button size="small" type="primary" @click="getAddress">搜索</el-button>
          </div>
        </div>

      </div>
      <span slot="footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="confirm()">确认</el-button>
      </span>
    </el-dialog>
  </basic-container>

</template>
<script>



// npm i @amap/amap-jsapi-loader --save
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  securityJsCode: "eb2fe9cdf16a1fae96eb343b76bb970c",
};


export default {
  name: "z-map",
  components: {
    AMapLoader,
  },
  props: {
    lng: {
      type: String,
      default: "106.656669",
    },
    lat: {
      type: String,
      default: "26.612854",
    },
  },
  data() {
    return {
      AMap: null,
      map: null,
      marker: null,
      addr:'',
      keyword:'',
      show:false,
    };
  },



  mounted() {
    this.initAMap();
  },

  watch: {
    "lng"() {
      this.initAMap()
    },
  },

  methods: {
    open(){
      this.show = true;
      this.initAMap();
    },


    confirm(){
      let lnglat ={
        lng:this.lng,
        lat:this.lat,
        addr:this.addr,
      }
      this.$emit("confirm",lnglat)
      this.show = false;
    },

    initAMap() {
      AMapLoader.load({
        key: "ba077329337b37777a457c4a775ecdb3",
        version: "2.0",
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          'AMap.Geocoder',
          'AMap.CitySearch',
          'AMap.Geolocation',
          'AMap.AutoComplete'
        ],
      }).then((AMap) => {

        this.AMap = AMap;
        this.map = new this.AMap.Map("mapContainer", {
          center: [this.lng, this.lat],
          resizeEnable: true,
          viewMode: "3D", // 使用3D视图
          zoomEnable: true, // 地图是否可缩放，默认值为true
          dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
          doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
          zoom: 14, //初始化地图级别
          //mapStyle: "amap://styles/darkblue", // 设置颜色底层
        });

        this.map.on("click", this.mapClick);
        this.addMarker();
      })
    },



    mapClick(e) {
      this.lng = e.lnglat.lng;
      this.lat = e.lnglat.lat;
      this.getLngLatAddr(this.lng,this.lat);
      this.addMarker();
    },



    getLngLatAddr(lng,lat){
      let geocoder = new AMap.Geocoder({radius: 1000});
      let _this = this;
      geocoder.getAddress([lng,lat],function (status, result) {
        if (status === "complete" && result.info === "OK") {
          _this.addr = result.regeocode.formattedAddress;
        }
      })
    },




    addMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
        this.marker = null;
      }
      this.marker = new this.AMap.Marker({
        position: new this.AMap.LngLat(this.lng, this.lat),
      });
      this.map.add(this.marker);
      this.map.setCenter([this.lng, this.lat]);
    },





    getAddress() {
      if (!this.keyword){
        return this.$message.error("请输入内容");
      }

      let geocoder = new AMap.Geocoder({radius: 1000});
      geocoder.getLocation(this.keyword, (status, result) => {
        if (status === "complete" && result.info === "OK") {
          const res = result.geocodes[0].location;
          this.lng = res.lng;
          this.lat = res.lat;
          this.addr = result.geocodes[0].formattedAddress;
          this.addMarker();
        } else {
          this.$message.error("未找到地址信息");
        }
      });
    },


  },
};
</script>


<style lang="scss" scoped>
.map-box{
  position: relative;
  .search-boc{
    position: absolute;
    top: 0;
    display: flex;
    ::v-deep .el-input__inner{
      border-radius: 0;
    }
    ::v-deep .el-button{
      border-radius: 0;
    }
  }
}
</style>
